import { useState } from "react";
import { Radio, Tooltip, Select, DatePicker, Button } from "antd";
import { QuestionCircleOutlined, CaretDownOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { SelectStaff } from "@/components/func";

const { Option } = Select;
const { RangePicker } = DatePicker;

function handleChange(value: any) {
  console.log(`selected ${value}`);
}

function onChange(dates: any, dateStrings: any) {
  console.log("From: ", dates[0], ", to: ", dates[1]);
  console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
}

const disabledDate: any = (current: number) => {
  return (
    current &&
    (dayjs(current).valueOf() - dayjs().valueOf() > 0 ||
      dayjs(current).valueOf() - dayjs().valueOf() < -(24 * 60 * 60 * 1000 * 13))
  );
};

const QrData = () => {
  const [staff, setStaff]: any = useState([]);

  return (
    <div className="qr-data m-16 bg-white py-16 px-24">
      <div className="mb-24">
        <span>渠道码：</span>
      </div>
      <div className="flex">
        <ul className="w-400 list mr-12 bg-blue-f7fcff border-1 border-solid border-blue-acd7ff pt-32 pb-24 mt-16 flex items-start">
          <li className="relative flex flex-col flex-1 items-center justify-center">
            <h2 className=" text-xl font-semibold leading-9">4</h2>
            <p className="mt-5">今日添加客户数(人)</p>
          </li>
          <li className="relative flex flex-col flex-1 items-center justify-center">
            <h2 className=" text-xl font-semibold leading-9">0</h2>
            <p className="mt-5">今日流失客户数(人)</p>
          </li>
        </ul>
        <ul className="w-400 list bg-blue-f7fcff border-1 border-solid border-blue-acd7ff pt-32 pb-24 mt-16 flex items-start">
          <li className="relative flex flex-col flex-1 items-center justify-center">
            <h2 className=" text-xl font-semibold leading-9">4</h2>
            <p className="mt-5">总添加客户数(人)</p>
          </li>
          <li className="relative flex flex-col flex-1 items-center justify-center">
            <h2 className=" text-xl font-semibold leading-9">0</h2>
            <p className="mt-5">总流失客户数(人)</p>
          </li>
        </ul>
      </div>

      {/* 分割线 */}
      <div className="h-6 mt-24 bg-grey-200"></div>

      {/* 图表数据 */}
      <div className="mt-24 text-grey-900">
        <p className="text-base">图表数据</p>
        <div className="py-16">
          <Radio.Group defaultValue="a" buttonStyle="solid" className="mr-16">
            <Radio.Button value="a">客户数据</Radio.Button>
            <Radio.Button value="b">新增客户数</Radio.Button>
            <Radio.Button value="c">流失客户数</Radio.Button>
          </Radio.Group>
          <Tooltip
            color="#fff"
            placement="bottom"
            title={
              <ul className="text-grey-800 text-xs leading-3">
                <li className="mb-5">
                  1、客户总数：扫码添加的客户总数，若客户重复添加将不会重复计数
                </li>
                <li className="mb-5">
                  2、新增客户数：扫码添加的新增客户数，包含流失数据
                </li>
                <li>3、流失客户数：扫码添加后将成员删除的客户数</li>
              </ul>
            }>
            <span className="text-grey-800 mr-5">统计说明</span>
            <QuestionCircleOutlined style={{ color: "#aaa" }} />
          </Tooltip>
        </div>
        <div className="mb-16 flex items-center justify-between">
          <div className="flex items-center flex-wrap">
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              onChange={handleChange}
              suffixIcon={<CaretDownOutlined />}>
              <Option value="jack">今日</Option>
              <Option value="lucy">近一周</Option>
              <Option value="Yiminghe">近一个月</Option>
            </Select>
            <div className="flex items-center">
              <span className="ml-20">自定义：</span>
              <RangePicker
                format="YYYY/MM/DD"
                disabledDate={disabledDate}
                onChange={onChange}
              />
            </div>
            <div className="flex items-center">
              <span className="ml-20">请选择员工：</span>
              <SelectStaff
                id="area3"
                placeholder="请选择员工"
                // value={(backupStaff && backupStaff.id) || null}
                setStaff={(SelectStaff: any) => {
                  console.log(SelectStaff);
                  setStaff(SelectStaff[0]);
                }}
              />
            </div>
          </div>
          <div>
            <Button>重置</Button>
          </div>
        </div>
      </div>

      {/* 分割线 */}
      <div className="h-6 mt-24 bg-grey-200"></div>

      {/* 图表数据 */}
      <div className="mt-24 text-grey-900">
        <p className="text-base">表格数据</p>
        <div className="py-16">
          <Radio.Group defaultValue="a" buttonStyle="solid" className="mr-16">
            <Radio.Button value="a">按日期查看</Radio.Button>
            <Radio.Button value="b">按员工查看</Radio.Button>
          </Radio.Group>
          <Button type="primary" ghost className="float-right">
            导出Excel
          </Button>
        </div>
      </div>
    </div>
  );
};

export default QrData;
